最近开发小程序,对应ES6是一个很好的应用机会。现在整理下ES6中字符串类型的一些实用扩展,供大家参考。目前主要是参考阮一峰老师的ECMAScript 6 入门
字符串的遍历接口
ES6为字符串添加了遍历接口,使得字符串可以被for..of
遍历。
for(let st of 'foo') {
console.log(st)
}
// 'f'
// 'o'
// 'o'
includes()、startsWith()、endsWith()
ES5中,indexOf()
可以一个字符串是否存在另一个字符串中。ES6中又提供了三个方法:
- includes(): 返回布尔值,表示是否找个参数字符串。
- startsWith(): 返回布尔值,表示参数字符串是否在原字符串的头部。
- endsWith(): 返回布尔值,表示参数字符串是否在原字符串的尾部。
let string = 'Hello Clearlove'
string.includes('Clearlove'); // true
string.stattsWith('Hello'); // true
string.endsWith('Clearlove'); // true
这三个方法都支持第二个参数,表示开始搜索的位置:
let string = 'Hello Clearlove'
string.includes('Clearlove', 6); //true
string.starstWith('Hello', 6); false
string.endsWith('Hello', 5); // true
使用第二个参数n
时,endsWith()
的行为与其他两个方法有所不同。它是针对前n
个字符,而其他两个方法针对从第n
个位置直到字符串结束。
repeat
repeat
方法返回一个新字符串,表示将原字符串重复n
遍。
'x'.repeat(2); // 'xx'
'Hello'.repeat(2); 'HelloHello'
'na'.repeat(0); ''
如果是小数则会向下取整:
'na'.repeat(2.9); // 'nana'
如果repeat
的参数是负数或者Infinity
,则会报错:
'na'.repeat(-1); // RangError
'na'.repeat(Infinity); // RangError
但是,如果参数是0到-1之间的小数,则等同于0,这是因为会先进行取整运算。0到-1之间的小数,取整以后等于-0,repeat视同为0
'na'.repeat(-0.9); // ''
参数NaN等同于0
'na'.repeat(NaN); // ''
如果repeat的参数是字符串,则会先转换成数字。
'na'.repeat('na') // ''
'na'.repeat('3') // 'nanana'
padStart()、padEnd()
字符串自动补充,如果字符串长度不够指定长度 ,会在头部或者尾部补全。padStart()
用于在头部补全,padEnd()
用于在尾部补全。
`love`.padStart(9, 'Clear'); // 'Clearlove'
'Clear'.padEnd(9, 'love'); // 'Clearlove'
如果原字符串的长度,等于或者大于制定最小长度,则返回原字符串。
'Clearlove'.padStart(5, '12'); // 'Clearlove'
如果用来补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串。
'Clearlove'.padEnd(12, '123456'); // 'Clearlove123'
如果省略第二个参数,默认使用空格补全长度。
'Clearlove'.padEnd(10); // 'Clearlvoe '
模板字符串
模板字符串(template string)是增强版的字符串,用反引号`
标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
// 普通字符串
`Clearlove is a boy`
// 多行字符串
`Clearlove is
a boy`
// 字符串嵌入变量
let name = 'Clearlove', time = 'today'
`Hello ${name}, how are you ${time}?` // Hello Clearlove, how are you today?
上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。
`\`Hello\` Clearlove!` // `Hello` Clearlove
如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`);
上面代码中,所有模板字符串的空格和换行,都是被保留的,比如<ul>
标签前面会有一个换行。如果你不想要这个换行,可以使用trim
方法消除它。
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`.trim());
模板字符串中嵌入变量,需要将变量名写在${}
之中。大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性,还能调用函数。
String.raw()
String.raw()
方法,当作模板字符串的处理函数,返回已替换变量或执行函数后的字符串。若模板字符串中存在一个斜杠,则会被转义成两个斜杠。若本身为两个斜杠,则不做处理。
let s1 = 'Clear', s2 = 'love'
String.raw`${ s1 + s2 }` // 'Clearlove'
作为函数调用较少出现,就不多做介绍。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。